<template>
	<view>
		<view>
			<view class="box">
				<view class="zi">{{$t('index.tel')}}</view>
				<view class="zi2">{{tel}}</view>
			</view>
			<view class="box">
				<view class="zi">{{$t('buymusic.status')}}</view>
				<view class="zi2">{{status==0?$t('buymusic.noregit'):$t('buymusic.regit')}}</view>
			</view>

			<view v-show="type==0?false:true">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in zazhilist" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>

			<view class="box2">
				<u-button type="defalut" :text="status==0?$t('buymusic.buy'):$t('app.qx')" @click="openAndClose()"
					size="20px" color="#014099" style="margin-top: 30px;"></u-button>
			</view>
			<view class="box3">
				<text>{{desc}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResponseData,
		showToastTip,
		getBaseUrl,
		getWsUrl
	} from "@/api/req.js";
	export default {
		data() {
			return {
				serviceid: '',
				pagetitle: "", //标题栏信息
				desc: "",
				tel: "",
				status: 0,
				type: '', //是否有选择框

				zazhilist: [],
				visible: true,
				indicatorStyle: `height: 40px;`,
				vasType:''


			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.tel = uni.getStorageSync("etlSim");
			//	console.log(option.id); //打印出上个页面传递的参数。
			var that = this;
			this.serviceid = option.id;
			getResponseData("/vas/queryVasByVasId", 'get', {
				vasId: option.id
			}, function(res) {
				if (res.code == 200) {
					var yuyan = uni.getStorageSync("UNI_LOCALE");
					that.type = res.data.isType; // 是否有下拉选择
					console.log(res.data);
					if (yuyan == 'zh') {
						that.pagetitle = res.data.nameZh;
						that.desc = res.data.messageZh;
					} else if (yuyan == 'en') {
						that.pagetitle = res.data.nameEn;
						that.desc = res.data.messageEn;
					} else {
						that.pagetitle = res.data.nameLao;
						that.desc = res.data.messageLao;
					}
					if (res.data.vasOrderList.length > 0) {
						that.status = 1;
					}
					// 往下拉列表中填充数据
					if (res.data.vasTypeList.length > 0) {
						res.data.vasTypeList.forEach(function(v) {
							if (yuyan == 'zh') {
								var a = {id:v.id,name:v.nameZh}
								that.zazhilist.push(a);
							} else if (yuyan == 'en') {
								var a = {id:v.id,name:v.nameEn}
								that.zazhilist.push(a);
							} else {
								var a = {id:v.id,name:v.nameLao}
								that.zazhilist.push(a);
							}
						})

					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}

				//设置标题栏信息
				uni.setNavigationBarTitle({
					title: that.pagetitle
				});
			});

		},
		methods: {
			bindChange: function(e) {
				if(e.detail.value>this.zazhilist.length){
					return
				}
				//得到选中的杂志 id
				this.vasType=this.zazhilist[e.detail.value[0]].id;
				
				// this.xzzazhi = this.zazhilist[e.detail.value[0]];
			},
			openAndClose: function() {
				var that = this;
				uni.showModal({
					content: this.status == 0 ? this.$t('buymusic.qdbuy') + '？' : this.$t('buymusic.xqbuy') +
						'？',
					confirmText: this.$t('app.qd'),
					cancelText: this.$t('app.qx'),
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							getResponseData("/vas/openAndClose", 'get', {
								vasId: that.serviceid,
								status: that.status == 0 ? 1 : 0,
								typeId: that.type
							}, function(res) {
								console.log(res);
								if (res.code == 200) {
									that.status = that.status == 0 ? 1 : 0;
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}


							});

						} else {
							// 执行取消后的操作
						}
					}
				})
			}
		}
	}
</script>

<style>
	.picker-view {
		width: 400rpx;
		height: 250rpx;

		margin: auto;
		margin-top: 20rpx;
	}

	.item {
		line-height: 80rpx;
		text-align: center;
	}

	.box {
		border: 1px #1eb9ee solid;
		width: 70%;
		margin: 0 auto;
		text-align: center;
		margin-top: 20px;
		box-shadow: 3px;
	}

	.box2 {
		width: 70%;
		margin: 0 auto;
	}

	.box3 {
		width: 90%;
		margin: 0 auto;
		margin-top: 30px;
	}

	.zi {
		font-size: 16px;

	}

	.zi2 {
		font-size: 16px;
		/* font-weight: 600; */
		color: gray;
	}
</style>